<template>
  <view class="order-finish-page">
    <view class="custom-header" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="header-content">
        <view class="header-left" @click="handleBack">
          <image
            class="search-icon"
            src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/order/back.png"
            mode="aspectFit"
          ></image>
        </view>
        <view class="header-center">
          <image
            class="logo"
            src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/order/logo.png"
            mode="heightFix"
          ></image>
        </view>
        <view class="header-right">
          <!-- 右侧预留空间，保持对称 -->
        </view>
      </view>
    </view>
    <image
      src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/order/finish.png"
      mode="widthFix"
      class="finish-bg"
    ></image>

    <view class="fail-container" v-show="result == '0'">
      <image
        src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/order/fail.png"
        mode="widthFix"
      ></image>
      <view class="fail-r">您的订单提交失败</view>
      <view class="fail-d">提示：账户余额不足！</view>
      <button class="btn btn-primary" @click="showContactModal">
        联系客服
      </button>
    </view>
    <!-- 成功状态区域 -->
    <view class="success-section" v-show="result == '1'">
      <view class="success-title">
        <image
          src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/order/success.png"
          mode="widthFix"
        ></image>
        订单提交成功</view
      >
    </view>

    <!-- 操作按钮区域 -->
    <view class="action-section" v-show="result == '1'">
      <button class="btn btn-outline" @click="continueShopping">
        返回商城
      </button>
      <button class="btn btn-primary" @click="viewOrderDetail">订单详情</button>
    </view>

    <view class="qrcode-container">
      <image
        src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/order/qrcode.png"
        mode="widthFix"
      ></image>
      <view class="c1">
        <view class="txt"
          >想获取最新活动消息？紧盯群聊！宝藏资讯都在这里等你抢先看！</view
        >
        <view class="link">
          跳转至晶养源官网
          <image
            src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/order/link.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>

    <!-- 联系客服弹框组件 -->
    <ContactServiceModal ref="contactServiceModal" />
  </view>
</template>

<script>
import ContactServiceModal from '@/components/ContactServiceModal.vue'

export default {
  components: {
    ContactServiceModal
  },
  data() {
    return {
      isExpanded: false,
      statusBarHeight: 0,
      result: "",
      orderData: {
        orderId: "",
        totalPrice: "",
      },
    };
  },
  computed: {
    // 显示的商品列表
    displayProducts() {
      if (!this.orderData.products || this.orderData.products.length === 0) {
        return [];
      }
      if (this.isExpanded) {
        return this.orderData.products;
      } else {
        return this.orderData.products.slice(0, 2);
      }
    },
    // 剩余商品数量
    remainingCount() {
      if (!this.orderData.products || this.orderData.products.length <= 2) {
        return 0;
      }
      const remaining = this.orderData.products.length - 2;
      return remaining > 0 ? remaining : 0;
    },
  },
  onLoad(options) {
    // 获取页面参数
    if (options.result) {
      this.result = options.result;
    }
    if (options.orderId) {
      this.orderData.orderId = options.orderId;
    }
    if (options.totalPrice) {
      this.orderData.totalPrice = options.totalPrice;
    }
  },
  mounted() {
    this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
  },
  methods: {
    handleBack() {
      uni.navigateBack();
    },
    // 获取当前时间
    getCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 展开/收起商品列表
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    },
    // 显示联系客服弹框
    showContactModal() {
      this.$refs.contactServiceModal.show();
    },
    // 查看订单详情
    viewOrderDetail() {
      uni.redirectTo({
        url: `/pages/order/detail?orderId=${this.orderData.orderId}`,
      });
    },
    // 继续购物
    continueShopping() {
      uni.switchTab({
        url: "/pages/mall/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.qrcode-container {
  display: flex;
  margin-top: 116rpx;
  justify-content: center;
  gap: 26rpx;
  image {
    width: 220rpx;
  }
  .c1 {
    width: 229rpx;
    padding-top: 10rpx;
    font-size: 22rpx;
    .link {
      text-decoration: underline;
      margin-top: 71rpx;
      font-size: 18rpx;
      image {
        width: 18rpx;
        margin-left: 6rpx;
      }
    }
  }
}

.fail-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 116rpx;
  image {
    width: 54rpx;
  }
  .fail-r {
    font-size: 30rpx;
    color: #000;
    margin-top: 39rpx;
  }
  .fail-d {
    font-size: 24rpx;
    color: #999;
    margin-top: 52rpx;
  }
  .btn {
    margin-top: 92rpx;
  }
}
.custom-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  z-index: 999;

  .header-content {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
  }

  .header-left {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .search-icon {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .logo {
      height: 50rpx;
    }
  }

  .header-right {
    width: 60rpx;
  }
}
.order-finish-page {
  background-color: #fff;
  min-height: 100vh;
  box-sizing: border-box;
  .finish-bg {
    width: 100%;
  }
}

// 成功状态区域
.success-section {
  margin-top: 97rpx;
}

.success-title {
  display: block;
  font-size: 34rpx;
  font-weight: 600;
  color: #000;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  image {
    width: 43rpx;
    margin-right: 19rpx;
  }
}

// 商品信息区域
.product-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}

.section-header {
  padding: 30rpx 30rpx 0;
  border-bottom: 2rpx solid #f0f0f0;
}

.product-list {
  padding: 30rpx;
}

.product-item {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.product-image {
  width: 120rpx;
  height: 120rpx;
  margin-right: 24rpx;
  border-radius: 12rpx;
  overflow: hidden;

  image {
    width: 100%;
    height: 100%;
  }
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 12rpx;
  line-height: 1.4;
}

.product-quantity {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 8rpx;
}

.product-price {
  font-size: 30rpx;
  color: #333333;
  font-weight: 600;
}

.expand-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  margin-top: 20rpx;
  border-top: 2rpx solid #f0f0f0;
  font-size: 26rpx;
  color: #666666;
}

.arrow {
  width: 24rpx;
  height: 24rpx;
  margin-left: 12rpx;
  transition: transform 0.3s ease;

  &.expanded {
    transform: rotate(180deg);
  }

  image {
    width: 100%;
    height: 100%;
  }
}

// 温馨提示区域
.tips-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
}

.tip-item {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.tip-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 20rpx;
}

.tip-text {
  font-size: 26rpx;
  color: #666666;
  line-height: 1.4;
}

// 操作按钮区域
.action-section {
  margin-top: 124rpx;
  display: flex;
  gap: 47rpx;
  justify-content: center;
}

.btn {
  width: 230rpx;
  height: 66rpx;
  line-height: 66rpx;
  border-radius: 0;
  font-size: 24rpx;
  border: none;
  margin: 0;
  padding: 0;

  &.btn-outline {
    background-color: #ffffff;
    color: #000;
    border: 2rpx solid #000;
  }

  &.btn-primary {
    background-color: #000000;
    color: #ffffff;
  }
}
</style>
